<template>
  <div class="GoodsItem">
    <img class="goodImg" :src="value.productImage" alt />
    <div class="goodsTitle">{{value.productName}}</div>
    <div class="goodsPrice">￥{{value.salePrice}}</div>
    <el-button type="danger" class="btn" plain @click="addCart">加入购物车</el-button>
  </div>
</template>

<script>
import addCart from "../../../models/addCart";
export default {
  name: "HelloWorld",
  props: {
    value: Object
  },
  methods: {
    async addCart() {
      var data = await addCart(this.value._id);
      this.$message({
        message: data.data.msg
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.GoodsItem {
  width: 210px;
  padding: 10px;
  border: 1px solid #e9e9e9;
  background-color: #fff;
}
.goodsTitle {
  font-weight: 600;
  text-align: center;
}
.goodsPrice {
  color: red;
  font-size: 20px;
  margin: 30px 0 15px;
}
.goodImg {
  width: 210px;
  height: 220px;
}
.btn {
  width: 100%;
  font-weight: 800;
}
</style>
